<template>
  <a-modal
    class="layout-modal"
    v-model:visible="visible"
    :closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
    :draggable="draggable"
    :fullscreen="isFullscreen"
    :okText="okText"
    :mask-closable="false"
  >
    <template #title >
      <a-alert type="info" :show-icon="false" closable @close="handleCancel">
        <template #title>
          标题
        </template>
        <template #action>
            <span class="cursor-pointer" @click="onClickFull">
                <icon-fullscreen-exit v-if="isFullscreen"/>
                <icon-fullscreen v-else/>
            </span>
        </template>
      </a-alert>
    </template>
    <div>You can cusstomize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
  </a-modal>
</template>

<script>
  const { ref, unref } = window.Vue;
  export default {
    setup(){
      const isFullscreen = ref(false)
      const visible = ref(true)
      const okText = ref("提交")
      const draggable = ref(false)
      const handleOk = ()=>{
        visible.value = !unref(visible)
      }
      const handleCancel = ()=>{
        visible.value = !unref(visible)
      }
      const onClickFull = ()=>{
        isFullscreen.value = !unref(isFullscreen)
      }
      return {
        title,
        okText,
        visible,
        draggable,
        isFullscreen,
        handleOk,
        handleCancel,
        onClickFull
      }
    }
  };
</script>
